<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .card-list {
        display: flex;
        flex-wrap: wrap;
      }
      .card-list .item {
        width: 400px;
        margin: 10px;
      }
      img {
        width: 400px;
      }
    </style>
  </head>
  <body>
    <!-- 
        交叉口观测器 : Intersection Observer 
        实现图片懒加载的效果
     -->
    <div class="card-list">
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-1.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-2.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-3.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-4.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-5.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-6.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-1.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-2.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-3.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-4.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-5.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-6.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-1.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-2.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-3.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-4.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-5.jpeg" />
      </div>
      <div class="item">
        <img src="./img/lazy.gif" data-src="./img/panda-6.jpeg" />
      </div>
    </div>
    <script>
      const ob = new IntersectionObserver(
        (entries) => {
          console.log(entries, "entries-----------");
          for (const entry of entries) {
            if (entry.isIntersecting) {
              console.log("交叉了~~~~~");
              const img = entry.target;
              img.src = img.dataset.src;
              // 图片一经加载,就取消观察
              ob.unobserve(img);
            }
          }
        },
        {
          threshold: 0, //  0 - 1 交叉域值
        }
      );

      const imgs = document.querySelectorAll("img[data-src]");
      imgs.forEach((img) => {
        ob.observe(img);
      });
    </script>
  </body>
</html>
